<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台首页</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
    <link rel="stylesheet" th:href="@{/src/css/main.css}">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 顶部 -->
    <div class="layui-header header">
        <div class="layui-main">


            <a href="#" class="logo">个人中心</a>
            <!-- 显示/隐藏菜单 -->
            <a href="javascript:;" class="iconfont hideMenu icon-menu1"></a>
            <!-- 顶部右侧菜单 -->
            <ul class="layui-nav top_menu">
                <li class="layui-nav-item showNotice" id="showNotice" pc>
                    <a href="javascript:;"><i class="iconfont icon-gonggao"></i><cite>系统公告</cite></a>
                </li>
                <li class="layui-nav-item" mobile>
                    <a href="javascript:;" class="mobileAddTab" data-url="/sys/changePwd"><i
                            class="iconfont icon-shezhi1" data-icon="icon-shezhi1"></i><cite>修改密码</cite></a>
                </li>
                <li class="layui-nav-item" mobile>
                    <a th:href="@{/user/loginOut}" ><i class="iconfont icon-loginout"></i> 退出</a>
                </li>
                <li class="layui-nav-item" pc>
                    <a href="javascript:;">
                        <i class="layui-icon">&#xe612;</i>
                        <cite>
                            <!--<shiro:principal property="fullname"/>  -->
                        </cite>
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-url="/sys/personalData"><i class="iconfont icon-zhanghu"
                                                                                   data-icon="icon-zhanghu"></i><cite>个人资料</cite></a>
                        </dd>
                        <dd><a href="javascript:;" data-url="/sys/changePwd"><i class="iconfont icon-shezhi1"
                                                                                data-icon="icon-shezhi1"></i><cite>修改密码</cite></a>
                        </dd>
                        <dd><a th:href="@{/user/loginOut}" class="signOut"><i
                                class="iconfont icon-loginout"></i><cite>退出</cite></a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-side layui-bg-black">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <!--<ul class="layui-nav layui-nav-tree layui-nav-side"lay-filter="test"  >- -->
            <li class="layui-nav-item ">
                <a href="javascript:;">账号管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" data-url="/sys/toFixPwd" data-id="1" data-title="修改密码"class="site-demo-active" data-type="tabAdd">修改密码</a></dd>
                    <dd><a href="javascript:;" data-url="/sys/email" data-id="2" data-title="找回密码"class="site-demo-active" data-type="tabAdd">找回密码</a></dd>


                    <!--  <dd><a href="">跳转</a></dd>-->
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">我的竞拍</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" data-url="/sys/mygoods" data-id="3" data-title="管理竞拍"class="site-demo-active" data-type="tabAdd">管理竞拍</a></dd>
                    <dd><a a href="javascript:;" data-url="/sys/myhistory" data-id="4" data-title="出价记录"class="site-demo-active" data-type="tabAdd">出价记录</a></dd>
                    <!--  <dd><a href="">电商平台</a></dd>-->
                </dl>
            </li>
           <!-- <li class="layui-nav-item">
                <a href="javascript:;">我的拍卖</a>
                <dl class="layui-nav-child">
                    <dd><a href="">管理拍卖</a></dd>
                    <dd><a href="">我要拍卖</a></dd>
                    &lt;!&ndash;  <dd><a href="">电商平台</a></dd>&ndash;&gt;
                </dl>
            </li>-->
            <li class="layui-nav-item"><a href="javascript:;" data-url="/sys/message" data-id="5" data-title="消息管理"class="site-demo-active" data-type="tabAdd">消息管理</a></li>
            <li class="layui-nav-item"><a href="">我的订单</a></li>
            <li class="layui-nav-item"><a href="javascript:;" data-url="/sys/myfavgoods" data-id="6" data-title="我的收藏"class="site-demo-active" data-type="tabAdd">我的收藏</a></li>
            <li class="layui-nav-item"><a href="javascript:;" data-url="/sys/ts" data-id="7" data-title="我的投诉"class="site-demo-active" data-type="tabAdd">我的投诉</a></li>
            <li class="layui-nav-item"><a href="">地址管理</a></li>
        </ul>
        <!--  <div class="navBar"  layui-side-scroll></div>-->

    </div>

<div class="layui-body layui-form">
       <!-- &lt;!&ndash; 内容主体区域 &ndash;&gt; lay-filter="bodyTab"-->
  <!--  <div class="layui-tab" lay-filter="demo" lay-allowclose="true" style="margin-left: 200px;">

        <ul class="layui-tab-title"></ul>

        <div class="layui-tab-content"></div>

    </div>-->
    <div class="layui-tab marg0" lay-filter="demo" lay-allowclose="true" id="top_tabs_box">
            <ul class="layui-tab-title top_tab" id="top_tabs">
                <li class="layui-this" lay-id=""><i class="iconfont icon-computer"></i> <cite>个人首页</cite></li>
            </ul>




            <!-- 当前页面操作 -->
           <ul class="layui-nav closeBox">
                <li class="layui-nav-item" pc>
                    <a href="javascript:;"><i class="iconfont icon-caozuo"></i> 页面操作</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" class="refresh refreshThis"><i class="layui-icon">&#x1002;</i>
                            刷新当前</a></dd>
                        <dd><a href="javascript:;" class="closePageOther"><i class="iconfont icon-prohibit"></i>
                            关闭其他</a></dd>
                        <dd><a href="javascript:;" class="closePageAll"><i class="iconfont icon-guanbi"></i> 关闭全部</a>
                        </dd>
                    </dl>
                </li>
            </ul>
          <div class="layui-tab-content clildFrame">
                <div class="layui-tab-item layui-show">
                   <iframe th:src="@{/sys/main}"></iframe>
                </div>
            </div>
    </div>

    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>


<script th:src="@{/src/layui.js}"></script>
<script>
    layui.use(['element', 'layer', 'jquery'], function () {

        var element = layui.element;

// var layer = layui.layer;

        var $ = layui.$;

// 配置tab实践在下面无法获取到菜单元素

        $('.site-demo-active').on('click', function () {

            var dataid = $(this);

//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目

            if ($(".layui-tab-title li[lay-id]").length <= 0) {

//如果比零小，则直接打开新的tab项

                active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));

            } else {

//否则判断该tab项是否以及存在

                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有

                $.each($(".layui-tab-title li[lay-id]"), function () {

//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开

                    if ($(this).attr("lay-id") == dataid.attr("data-id")) {

                        isData = true;

                    }

                })

                if (isData == false) {

//标志为false 新增一个tab项

                    active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));

                }

            }

//最后不管是否新增tab，最后都转到要打开的选项页面上

            active.tabChange(dataid.attr("data-id"));

        });


        var active = {

//在这里给active绑定几项事件，后面可通过active调用这些事件

            tabAdd: function (url, id, name) {

//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值

//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分

                element.tabAdd('demo', {

                    title: name,

                    content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:99%;"></iframe>',

                    id: id //规定好的id

                })

                FrameWH();  //计算ifram层的大小

            },

            tabChange: function (id) {

//切换到指定Tab项

                element.tabChange('demo', id); //根据传入的id传入到指定的tab项

            },

            tabDelete: function (id) {

                element.tabDelete("demo", id);//删除

            }

        };

        function FrameWH() {

            var h = $(window).height();

            $("iframe").css("height", h + "px");

        }

    });
</script>
<script th:src="@{/src/app/leftNav.js}"></script>
<script th:src="@{/src/app/index.js}"></script>

</body>
</html>